import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    ScrollView,
    Switch,
    DeviceEventEmitter,
} from 'react-native';
import moment from 'moment';
import Loading from "../../../utils/Loading";
import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import Header from "../../../components/header";
import AndroidModule from '../../../utils/AndroidConnent'
import Constant from '../../../utils/Constant'//全局变量
import { ToastToUser } from '../../../utils/CustomToast';
import CarImagesBox from './components/CarImagesBox';
import CarInfoBox from './components/CarInfoBox'
import CarReportBox from './components/CarReportBox'
import CarDealBox from './components/CarDealBox'
import CarPurchaseInfoBox from './components/CarPurchaseInfoBox'
import CarRecordBox from './components/CarRecordBox'
import CarConfigBox from './components/CarConfigBox'
import CarDescriptionBox from './components/CarDescriptionBox'
import CarCompanyBox from './components/CarCompanyBox'
import { getImgUrl } from '../../../utils/ComFunction'
import BigImageContainer from '../../../components/Tool/BigImageContainer';
import MoreFunctionPop from './components/MoreFunctionPop';
import AlertCommonView from '../../../components/Tool/AlertCommonView';
import { CarSaleStatus, carDetectionStatus } from '../../../utils/Enum'
import BottomShareDialog, { SharePlatForm } from "../../common/BottomShareDialog";
import { shareWebToSession, shareWebToTimeline } from '../../../utils/WeChatUtils'
import base64 from 'react-native-base64';


let navigation
let mark = '_.'

const isIos = Platform.OS == 'ios';

export default class CarDetailPage extends Component {

    constructor(props) {
        super(props);
        let carId = this.props.route && this.props.route.params && this.props.route.params.carId ? this.props.route.params.carId : ''
        let saleStatus = this.props.route && this.props.route.params && this.props.route.params.saleStatus ? this.props.route.params.saleStatus : ''
        let merchantId = this.props.route && this.props.route.params && this.props.route.params.merchantId ? this.props.route.params.merchantId : ''
        let isJoinCar = this.props.route && this.props.route.params && this.props.route.params.isJoinCar ? this.props.route.params.isJoinCar : 0
        this.state = {
            isFranchisee: false, //车辆所属商家是否是加盟商
            memberClass: Constant.userInfo.memberClass,
            merchantId,
            isSelfCar: merchantId == Constant.userInfo.merchantId, //是否是自己的车
            isCollected: false, //是否收藏车辆
            saleStatus,
            carId: carId,
            carPics: [],
            data: {}, //车辆信息
            merchantData: {}, //商家信息
            reportPic: '',
            reportPcUrl: '',
            reportPdf: '',
            detectionReportPic: '',
            detectionReportUrl: '',
            detectionReportPdf: '',
            featuresArray: [],
            showBigImageContainer: false,
            currImgIndex: 0,
            showMorePop: false, //显示更多功能
            moreFunctionData: [//联盟商家，已上架
                { 'title': '刷新上架', key: 'upCar' },
                { 'title': '上传维保', key: 'upFours' },
                { 'title': '编辑车辆', key: 'editCar' },
                { 'title': '删除车辆', key: 'deleteCar' },
                { 'title': '车辆轨迹', key: 'carTrack' },
                { 'title': '退库', key: 'cancelStock' },
            ],
            showAlertData: {},
            showAlertCommonView: false,
            isShowShareBottom: false,
            sharePlatForms: [
                SharePlatForm.SharePlatFormWeChatSession,
                SharePlatForm.SharePlatFormWeChatTimeline,
                SharePlatForm.SharePlatFormWeChatEnt,
                SharePlatForm.SharePlatFormImages,
            ],

            isExternalCarEntryUser: Constant.userInfo.isExternalCarEntryUser || 0, // 是否是外部录车用户
            isJoinCar: isJoinCar, // 是否是加盟车辆展示形态
        }
    }

    componentWillUnmount() {
        if (this.foursQueryListener) {
            this.foursQueryListener.remove();
        }
        if (this.uploadMaintenceReport) {
            this.uploadMaintenceReport.remove();
        }
    }

    componentDidMount() {
        this.foursQueryListener = DeviceEventEmitter.addListener('foursQuery', e => {
            if (e.page == 'CarDetailPage') {
                navigation.navigate('FoursQuery', { vcode: e.vcode })
            }
        });

        this.foursQueryListener = DeviceEventEmitter.addListener('uploadMaintenceReport', e => {
            console.log('uploadMaintenceReport', e)
            if (e.page == 'CarDetailPage') {
                this.getCarDetails()
            }
        });

        this.getCarDetails()

        if (!this.state.isSelfCar) {
            this.getCarCollectStatus()
        } else {
            this.setState({
                isFranchisee: Constant.userInfo.isFranchisee,
            })
        }
        this.getMerchantInformation()
    }

    getCarDetails() {
        let param = {
            carId: this.state.carId,
            merchantId: this.state.merchantId
        }
        // if (this.Loading) {
        //     this.Loading.show();
        // }

        let url = ''
        if (this.state.merchantId == Constant.userInfo.merchantId) {//是自己的车
            if (this.state.saleStatus == CarSaleStatus.CarSaleStatusSaled) {
                url = HttpUrls.getOwnSoldCarDetails
            } else {
                url = HttpUrls.getOwnCarDetails
            }
        } else {//是别人的车
            param['clickMerchantId'] = Constant.userInfo.merchantId
            url = HttpUrls.getOthersCarDetails
        }


        HttpUtils.getRequest(url, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0) {
                    let data = result.data
                    let configArray = []
                    if (data.features && data.features != mark) {
                        let featuresArray = data.features.split(mark)
                        if (featuresArray.length > 0) {
                            let featuresFirst = featuresArray[0]
                            let featuresFirstArray = featuresFirst.split(',')
                            featuresFirstArray.map((item) => {
                                configArray.push(item)
                            })
                            if (featuresArray.length > 1) {
                                configArray.push(featuresArray[1])
                            }
                        }
                    }

                    let carPics = []
                    if (data.carPics) {
                        data.carPics.map((item) => {
                            carPics.push({ url: getImgUrl(item.picUrl) })
                        })
                    }

                    this.setState({
                        data,
                        saleStatus: data.saleStatus,
                        carPics: carPics,
                        reportPic: data.maintenanceRecord && data.maintenanceRecord.reportPic ? data.maintenanceRecord.reportPic : '',
                        reportPcUrl: data.maintenanceRecord && data.maintenanceRecord.reportPcUrl ? data.maintenanceRecord.reportPcUrl : '',
                        reportPdf: data.maintenanceRecord && data.maintenanceRecord.reportPdf ? data.maintenanceRecord.reportPdf : '',
                        detectionReportPic: data.detectionReportPic ? data.detectionReportPic : '',
                        detectionReportUrl: data.detectionReportUrl ? data.detectionReportUrl : '',
                        detectionReportPdf: data.detectionReportPdf ? data.detectionReportPdf : '',
                        featuresArray: configArray
                    }, function () {
                        if (this.state.isFranchisee) {//加盟商的更多按钮
                            this.setState({
                                moreFunctionData: [
                                    { 'title': '刷新上架', key: 'upCar' },
                                    { 'title': '上传维保', key: 'upFours' },
                                    { 'title': '删除车辆', key: 'deleteCar' },
                                    { 'title': '车辆轨迹', key: 'carTrack' },
                                ],
                            })
                        } else if (!this.state.data.joinUnion) {//联盟商家，未上架的更多按钮
                            this.setState({
                                moreFunctionData: [
                                    { 'title': '刷新上架', key: 'upCar' },
                                    { 'title': '上传维保', key: 'upFours' },
                                    { 'title': '检测', key: 'detection' },
                                    { 'title': '删除车辆', key: 'deleteCar' },
                                    { 'title': '车辆轨迹', key: 'carTrack' },
                                    { 'title': '退库', key: 'cancelStock' },
                                ],
                            })
                        }
                    })
                } else {
                    if (result.msg == '车辆已出库') {
                        this.setState({
                            saleStatus: CarSaleStatus.CarSaleStatusSaled
                        }, function () {
                            this.getCarDetails()
                        })
                    } else {
                        ToastToUser(result.msg ? result.msg : result.statusText)
                    }
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    getCarCollectStatus() {
        let param = {
            goodsId: this.state.carId,
            type: 2,
            userId: Constant.userInfo.userId
        }
        HttpUtils.postRequest(HttpUrls.checkCollected, param)
            .then((result) => {
                this.setState({
                    isCollected: result.data ? result.data : false
                })
            })
            .catch((error) => {

            });
    }

    getMerchantInformation() {
        HttpUtils.getRequest(HttpUrls.getMerchantInformation, { merchantId: this.state.merchantId })
            .then((result) => {
                if (result.code == 0) {
                    this.setState({
                        merchantData: result.data,
                        isFranchisee: result.data.isFranchisee,
                    })
                }
            })
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'车辆详情'} RightButton={() => this.renderRightButton()}></Header>
                <ScrollView
                    style={{ flex: 1 }}
                    showsVerticalScrollIndicator={false}
                >
                    <CarImagesBox
                        carPics={this.state.carPics}
                        morePicHandler={(index) => {
                            this.setState({
                                currImgIndex: index,
                                showBigImageContainer: true
                            })
                        }}
                    />

                    {/* 车辆信息 */}
                    {
                        this.state.data && Object.keys(this.state.data).length > 0 ?
                            <CarInfoBox
                                isFranchisee={this.state.isFranchisee}
                                isSelfCar={this.state.isSelfCar}
                                data={this.state.data}
                            />
                            :
                            null
                    }

                    {/* 收购信息 */}
                    {
                        this.state.isSelfCar && this.state.isExternalCarEntryUser == 0 ?
                            <CarPurchaseInfoBox
                                data={this.state.data}
                            />
                            :
                            null
                    }

                    {/* 成交信息 */}
                    {
                        this.state.saleStatus == CarSaleStatus.CarSaleStatusSaled ?
                            <CarDealBox
                                data={this.state.data}
                            />
                            :
                            null
                    }

                    {/* 车辆档案 */}
                    <CarRecordBox
                        data={this.state.data}
                        lookRecordDetail={() => {
                            navigation.navigate('CarRecordPage', { data: this.state.data })
                        }}
                    />


                    {/* 维保、检测报告 */}
                    <CarReportBox
                        carId={this.state.carId}
                        vcode={this.state.data.vcode}
                        navigation={navigation}
                        reportPic={this.state.reportPic}
                        reportPcUrl={this.state.reportPcUrl}
                        reportPdf={this.state.reportPdf}
                        detectionReportPic={this.state.detectionReportPic}
                        detectionReportUrl={this.state.detectionReportUrl}
                        detectionReportPdf={this.state.detectionReportPdf}
                    />

                    {/* 车辆配置 */}
                    <CarConfigBox
                        data={this.state.featuresArray}
                        lookCarConfigDetail={() => {
                            navigation.navigate('CarConfigPage', { species: this.state.data.species })
                        }}
                    />

                    {/* 车况描述 */}
                    {
                        this.state.data && this.state.data.carCondition ?
                            <CarDescriptionBox
                                name={'车况描述'}
                                carCondition={this.state.data.carCondition}
                            />
                            :
                            null
                    }

                    {/* 瑕疵描述 */}
                    {
                        this.state.data && this.state.data.faultDescribe && this.state.isSelfCar ?
                            <CarDescriptionBox
                                name={'瑕疵描述'}
                                carCondition={this.state.data.faultDescribe}
                            />
                            :
                            null
                    }

                    {/* 公司信息 */}
                    {
                        !this.state.isSelfCar && Object.keys(this.state.merchantData).length > 0 ?
                            <CarCompanyBox
                                navigation={navigation}
                                isJoinCar={this.state.isJoinCar}
                                data={this.state.merchantData}
                            />
                            :
                            null
                    }

                    <View style={{ height: 10 }} />

                </ScrollView>
                {/* 底部按钮 */}
                {
                    this.state.isJoinCar == 0 ?
                        this.state.saleStatus && this.state.isSelfCar ?
                            this.state.isFranchisee ?
                                this.renderFranchiseeBottomBox() : this.renderBottomBox()
                            :
                            !this.state.isSelfCar && Object.keys(this.state.data).length > 0 ?
                                this.renderConsultBtn()
                                :
                                null
                        :
                        null
                }

                <Loading onRef={(ref) => (this.Loading = ref)} />

                {
                    this.state.showBigImageContainer ?
                        <BigImageContainer
                            idx={this.state.currImgIndex}
                            images={this.state.carPics}
                            closeHandler={(index) => {
                                this.setState({
                                    currImgIndex: index,
                                    showBigImageContainer: false
                                })
                            }}
                        />
                        :
                        null
                }

                {
                    this.state.showMorePop ?
                        <MoreFunctionPop
                            visible={this.state.showMorePop}
                            data={this.state.moreFunctionData}
                            clickHandle={(item, index) => {
                                this.setState({
                                    showMorePop: false
                                }, function () {
                                    setTimeout(() => {
                                        this.moreFuction(item)
                                    }, 250);
                                })
                            }}
                            cancelHandle={() => {
                                this.setState({
                                    showMorePop: false
                                })
                            }}
                        />
                        :
                        null
                }

                {
                    this.state.showAlertCommonView ?
                        <AlertCommonView
                            title={this.state.showAlertData.title}
                            content={this.state.showAlertData.content}
                            cancelBtnText={this.state.showAlertData.cancelBtnText}
                            sureBtnText={this.state.showAlertData.sureBtnText}
                            cancelHandler={() => {
                                this.setState({
                                    showAlertCommonView: false
                                })
                            }}
                            sureHandler={() => {
                                this.setState({
                                    showAlertCommonView: false
                                })
                                if (this.state.showAlertData.type == 'deleteCar') {
                                    this.deleteCar()
                                } else if (this.state.showAlertData.type == 'upCar') {
                                    this.upCar()
                                }
                            }}
                        />
                        :
                        null
                }

                {this.state.isShowShareBottom ?
                    <BottomShareDialog
                        sharePlatForms={this.state.sharePlatForms}
                        visible={this.state.isShowShareBottom}
                        shareResult={(platform) => {
                            if (platform == SharePlatForm.SharePlatFormWeChatSession || platform == SharePlatForm.SharePlatFormWeChatTimeline || platform == SharePlatForm.SharePlatFormWeChatEnt) {
                                this.shareWebToWx(platform)
                            } else if (platform == SharePlatForm.SharePlatFormImages) {
                                this.sharePlatFormImages()
                            }
                        }}
                        onClose={() => {
                            this.setState({
                                isShowShareBottom: false
                            })
                        }}>

                    </BottomShareDialog>
                    :
                    null
                }

            </View>
        )
    }

    renderConsultBtn() {
        return (
            <View style={[styles.bottomBg, { height: 52 + (Constant.bottomHeight > 0 ? Constant.bottomHeight : 8), paddingHorizontal: 16, borderTopWidth: 0 }]}>
                <TouchableOpacity
                    style={styles.consultBtn}
                    onPress={() => {
                        this.consultOnline()
                    }}
                >
                    <Text style={{ fontSize: 14, color: '#333' }}>在线咨询</Text>
                </TouchableOpacity>
            </View>
        )
    }

    renderFranchiseeBottomBox() {
        return (
            <View style={[styles.bottomBg, { height: 49 + Constant.bottomHeight }]}>
                {

                    this.state.saleStatus == CarSaleStatus.CarSaleStatuseOnSale ? //在售
                        <View style={styles.bottomBox}>
                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    navigation.navigate('PublishCarPage', {
                                        carId: this.state.carId, completion: () => {
                                            navigation.goBack()
                                            this.getCarDetails()
                                        }
                                    })
                                }}
                            >
                                <Image style={styles.itemImg} source={require('source/image/edit_car_icon.png')} />
                                <Text style={styles.itemText}>编辑</Text>
                            </TouchableOpacity>

                            {this.state.isExternalCarEntryUser == 0 && (
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.carDetection()
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_detection_icon.png')} />
                                    <Text style={styles.itemText}>检测</Text>
                                </TouchableOpacity>
                            )}

                            {this.state.isExternalCarEntryUser == 0 && (
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        navigation.navigate('CarPriceSettingPage', {
                                            carId: this.state.carId, completion: () => {
                                                navigation.goBack()
                                                this.getCarDetails()
                                            }
                                        })
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_offer_price_icon.png')} />
                                    <Text style={styles.itemText}>定价</Text>
                                </TouchableOpacity>
                            )}

                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    navigation.navigate('CarCancelStockPage', {
                                        carId: this.state.carId, completion: () => {
                                            this.getCarDetails()
                                        }
                                    })
                                }}
                            >
                                <Image style={styles.itemImg} source={require('source/image/edit_return_stock.png')} />
                                <Text style={styles.itemText}>退库</Text>
                            </TouchableOpacity>


                            {this.state.isExternalCarEntryUser == 0 && (
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.setState({
                                            showMorePop: true
                                        })
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_more_icon.png')} />
                                    <Text style={styles.itemText}>更多</Text>
                                </TouchableOpacity>
                            )}

                        </View>
                        :
                        this.state.saleStatus == CarSaleStatus.CarSaleStatusReserved ? //已预定
                            <View style={styles.bottomBox}>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.carDetection()
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_detection_icon.png')} />
                                    <Text style={styles.itemText}>检测</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.uploadMaintenance()
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_upload_wb_icon.png')} />
                                    <Text style={styles.itemText}>上传维保</Text>
                                </TouchableOpacity>

                                {/* 外部录车不显示车辆轨迹 */}
                                {Constant.userInfo.isExternalCarEntryUser == 0 && (
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            navigation.navigate('CarTrackPage', { carId: this.state.carId })
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/car_trail_icon.png')} />
                                        <Text style={styles.itemText}>车辆轨迹</Text>
                                    </TouchableOpacity>
                                )}
                            </View>
                            :
                            this.state.saleStatus == CarSaleStatus.CarSaleStatusSaled ? //已售
                                <View style={styles.bottomBox}>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            navigation.navigate('CarReturnStockPage', {
                                                carId: this.state.carId, completion: () => {
                                                    navigation.pop(2)
                                                }
                                            })
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/return_garage_icon.png')} />
                                        <Text style={styles.itemText}>车辆回库</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            this.showDeleteCarAlert()
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/delete_car_icon.png')} />
                                        <Text style={styles.itemText}>删除车辆</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            navigation.navigate('CarTrackPage', { carId: this.state.carId })
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/car_trail_icon.png')} />
                                        <Text style={styles.itemText}>车辆轨迹</Text>
                                    </TouchableOpacity>
                                </View>
                                :
                                this.state.saleStatus == CarSaleStatus.CarSaleStatusCancelStock ? //已退库
                                    <View style={styles.bottomBox}>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                navigation.navigate('CarReturnStockPage', {
                                                    carId: this.state.carId, completion: () => {
                                                        navigation.pop(2)
                                                    }
                                                })
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/return_garage_icon.png')} />
                                            <Text style={styles.itemText}>车辆回库</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                this.showDeleteCarAlert()
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/delete_car_icon.png')} />
                                            <Text style={styles.itemText}>删除车辆</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                navigation.navigate('CarTrackPage', { carId: this.state.carId })
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/car_trail_icon.png')} />
                                            <Text style={styles.itemText}>车辆轨迹</Text>
                                        </TouchableOpacity>
                                    </View>
                                    :
                                    null
                }

            </View>
        )
    }

    renderBottomBox() {
        return (
            <View style={[styles.bottomBg, { height: 49 + Constant.bottomHeight }]}>
                {

                    this.state.saleStatus == CarSaleStatus.CarSaleStatuseOnSale ? //在售
                        <View style={styles.bottomBox}>
                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    this.bookCar(false)
                                }}
                            >
                                <Image style={styles.itemImg} source={require('source/image/edit_book_icon.png')} />
                                <Text style={styles.itemText}>预定</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    if (this.state.data.joinUnion) {//已上架,去检测
                                        this.carDetection()
                                    } else {
                                        navigation.navigate('PublishCarPage', {
                                            carId: this.state.carId, completion: () => {
                                                navigation.goBack()
                                                this.getCarDetails()
                                            }
                                        })
                                    }
                                }}
                            >
                                <Image style={styles.itemImg} source={this.state.data.joinUnion ? require('source/image/edit_detection_icon.png') : require('source/image/edit_car_icon.png')} />
                                <Text style={styles.itemText}>{this.state.data.joinUnion ? '检测' : '编辑'}</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    navigation.navigate('CarPriceSettingPage', {
                                        carId: this.state.carId, completion: () => {
                                            navigation.goBack()
                                            this.getCarDetails()
                                        }
                                    })
                                }}
                            >
                                <Image style={styles.itemImg} source={require('source/image/edit_offer_price_icon.png')} />
                                <Text style={styles.itemText}>定价</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    navigation.navigate('CarOutStockPage', {
                                        carId: this.state.carId, completion: () => {
                                            this.setState({
                                                saleStatus: CarSaleStatus.CarSaleStatusSaled
                                            }, function () {
                                                this.getCarDetails()
                                            })
                                        }
                                    })
                                }}
                            >
                                <Image style={styles.itemImg} source={require('source/image/edit_out_stock_icon.png')} />
                                <Text style={styles.itemText}>销售出库</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.itemBox}
                                onPress={() => {
                                    this.setState({
                                        showMorePop: true
                                    })
                                }}
                            >
                                <Image style={styles.itemImg} source={require('source/image/edit_more_icon.png')} />
                                <Text style={styles.itemText}>更多</Text>
                            </TouchableOpacity>
                        </View>
                        :
                        this.state.saleStatus == CarSaleStatus.CarSaleStatusReserved ? //已预定
                            <View style={styles.bottomBox}>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.bookCar(true)
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_book_icon.png')} />
                                    <Text style={styles.itemText}>编辑预定</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.carDetection()
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_detection_icon.png')} />
                                    <Text style={styles.itemText}>检测</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        navigation.navigate('CarPriceSettingPage', { carId: this.state.carId })
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_offer_price_icon.png')} />
                                    <Text style={styles.itemText}>定价</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        navigation.navigate('CarOutStockPage', {
                                            carId: this.state.carId, completion: () => {
                                                this.setState({
                                                    saleStatus: CarSaleStatus.CarSaleStatusSaled
                                                }, function () {
                                                    this.getCarDetails()
                                                })
                                            }
                                        })
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_out_stock_icon.png')} />
                                    <Text style={styles.itemText}>销售出库</Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    onPress={() => {
                                        this.setState({
                                            showMorePop: true
                                        })
                                    }}
                                >
                                    <Image style={styles.itemImg} source={require('source/image/edit_more_icon.png')} />
                                    <Text style={styles.itemText}>更多</Text>
                                </TouchableOpacity>
                            </View>
                            :
                            this.state.saleStatus == CarSaleStatus.CarSaleStatusSaled ? //已售
                                <View style={styles.bottomBox}>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            navigation.navigate('CarOutStockPage', {
                                                carId: this.state.carId, isEdit: true, completion: () => {
                                                    this.getCarDetails()
                                                }
                                            })
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/edit_out_stock_icon.png')} />
                                        <Text style={styles.itemText}>编辑出库</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            navigation.navigate('CarReturnStockPage', {
                                                carId: this.state.carId, completion: () => {
                                                    navigation.pop(2)
                                                }
                                            })
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/return_garage_icon.png')} />
                                        <Text style={styles.itemText}>车辆回库</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            this.showDeleteCarAlert()
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/delete_car_icon.png')} />
                                        <Text style={styles.itemText}>删除车辆</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        style={styles.itemBox}
                                        onPress={() => {
                                            navigation.navigate('CarTrackPage', { carId: this.state.carId })
                                        }}
                                    >
                                        <Image style={styles.itemImg} source={require('source/image/car_trail_icon.png')} />
                                        <Text style={styles.itemText}>车辆轨迹</Text>
                                    </TouchableOpacity>
                                </View>
                                :
                                this.state.saleStatus == CarSaleStatus.CarSaleStatusCancelStock ? //已退库
                                    <View style={styles.bottomBox}>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                navigation.navigate('CarCancelStockPage', {
                                                    carId: this.state.carId, isEdit: true, completion: () => {
                                                        this.getCarDetails()
                                                    }
                                                })
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/edit_out_stock_icon.png')} />
                                            <Text style={styles.itemText}>编辑退库</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                navigation.navigate('CarReturnStockPage', {
                                                    carId: this.state.carId, completion: () => {
                                                        navigation.pop(2)
                                                    }
                                                })
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/return_garage_icon.png')} />
                                            <Text style={styles.itemText}>车辆回库</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                this.showDeleteCarAlert()
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/delete_car_icon.png')} />
                                            <Text style={styles.itemText}>删除车辆</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity
                                            style={styles.itemBox}
                                            onPress={() => {
                                                navigation.navigate('CarTrackPage', { carId: this.state.carId })
                                            }}
                                        >
                                            <Image style={styles.itemImg} source={require('source/image/car_trail_icon.png')} />
                                            <Text style={styles.itemText}>车辆轨迹</Text>
                                        </TouchableOpacity>
                                    </View>
                                    :
                                    null
                }

            </View>

        )
    }

    renderRightButton() {
        return (
            <View style={styles.rightBg}>
                {
                    !this.state.isSelfCar && Object.keys(this.state.data).length > 0 ?
                        <TouchableOpacity
                            activeOpacity={0.8}
                            style={styles.rightItemBox}
                            onPress={() => { this.collection() }}>
                            <Image source={this.state.isCollected ? require('source/image/collection_sel_icon.png') : require('source/image/collection_icon.png')} style={styles.rightImg} />
                        </TouchableOpacity>
                        :
                        null
                }
                <TouchableOpacity
                    activeOpacity={0.8}
                    style={styles.rightItemBox}
                    onPress={() => { this.share() }}>
                    <Image source={require('source/image/share_icon.png')} style={styles.rightImg} />
                </TouchableOpacity>
            </View>
        )
    }

    shareWebToWx(platform) {
        let description = ''
        if (this.state.data.guidePrice && this.state.data.carType == 1) {
            description = '【指导价】:' + (this.state.data.guidePrice / 10000).toFixed(2) + '万'
        }
        if (this.state.data.markedPrice) {
            if (description.length > 0) {
                description = description + '\n'
            }
            description = description + '【售价】:' + (this.state.data.markedPrice / 10000).toFixed(2) + '万'
        }
        if (this.state.data.carType == 2) {
            if (this.state.data.registerDate && this.state.data.registerDate.length >= 2) {
                if (description.length > 0) {
                    description = description + '\n'
                }
                let registerDate = this.state.data.registerDate.split('-')[0] + '-' + this.state.data.registerDate.split('-')[1]
                description = description + '【上牌】:' + registerDate
            }
            if (this.state.data.mileage) {
                if (description.length > 0) {
                    description = description + '\n'
                    description = description + '【里程】:' + ((this.state.data.mileage / 10000).toFixed(2)) + '万公里'
                }
            }
        }

        let params = {
            carId: this.state.carId,
            merchantId: this.state.merchantId,
            shareMerchantId: Constant.userInfo.merchantId,
            shareUserId: Constant.userInfo.userId,
            userId: Constant.userInfo.userId,
        }

        let jsonString = JSON.stringify(params)
        const base64Encoded = base64.encode(jsonString);
        let webpageUrl = Constant.webDomain + '/app/webdetail?params=' + base64Encoded

        let data = {
            title: this.state.data.seriesName + ' ' + this.state.data.speciesName,
            description: description,
            type: 'news',
            webpageUrl: webpageUrl,
            thumbImage: getImgUrl(this.state.data.mainPic)
        }

        if (platform == SharePlatForm.SharePlatFormWeChatSession) {
            shareWebToSession(data)
        } else if (platform == SharePlatForm.SharePlatFormWeChatTimeline) {
            shareWebToTimeline(data)
        } else if (platform == SharePlatForm.SharePlatFormWeChatEnt) {
            try {
                AndroidModule.shareToWechatEnt(data)
            } catch (error) {
                
            }
        }
    }

    sharePlatFormImages() {
        try {
            AndroidModule.sharePlatFormCarDetailImages(this.state.data)
        } catch (error) {

        }
    }

    consultOnline() {
        let param = {
            consultingCarId: this.state.carId,
            buyerMerchantId: Constant.userInfo.merchantId,
            sellerMerchantId: this.state.merchantId,
            buyerUserId: Constant.userInfo.userId,
            source: 2

        }
        if (this.Loading) {
            this.Loading.show();
        }

        HttpUtils.postRequest(HttpUrls.createCarConversation, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                if (result.code == 0) {

                    setTimeout(() => {
                        navigation.navigate('MessageChat', {
                            imGroupId: result.data.imGroupId,
                            carId: this.state.carId
                        })
                    }, 500);

                } else {
                    ToastToUser(result.msg + '')
                }
                l
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    collection() {
        let param = {
            goodsId: this.state.carId,
            type: 2,
            userId: Constant.userInfo.userId
        }
        HttpUtils.postRequest(this.state.isCollected ? HttpUrls.cancleCollection : HttpUrls.addCollection, param)
            .then((result) => {
                if (result.data) {
                    let isCollected = this.state.isCollected
                    this.setState({
                        isCollected: !isCollected
                    }, function () {
                        ToastToUser(this.state.isCollected ? '收藏成功!' : '取消收藏成功!')
                    })
                }

            })
            .catch((error) => {

            });
    }

    share() {
        this.setState({
            isShowShareBottom: true
        })
    }

    moreFuction(item) {
        if (item.key == 'upCar') {// 刷新上架
            this.setState({
                showAlertData: {
                    title: '是否确认刷新上架？',
                    cancelBtnText: '取消',
                    sureBtnText: '确定',
                    type: 'upCar'
                },
                showMorePop: false,
                showAlertCommonView: true
            })
        } else if (item.key == 'upFours') {//上传维保报告
            this.uploadMaintenance()
        } else if (item.key == 'editCar') {//编辑车辆或者检测
            if ((this.state.data.joinQuotationCenter && this.state.isFranchisee) || (this.state.data.joinUnion && !this.state.isFranchisee)) {
                navigation.navigate('PublishCarPage', {
                    carId: this.state.carId, completion: () => {
                        navigation.goBack()
                        this.getCarDetails()
                    }
                })
            }
        } else if (item.key == 'detection') {//检测
            this.carDetection()
        } else if (item.key == 'deleteCar') {//删除车辆
            this.showDeleteCarAlert()
        } else if (item.key == 'carTrack') {//车辆轨迹
            navigation.navigate('CarTrackPage', { carId: this.state.carId })
        } else if (item.key == 'cancelStock') {//退库
            navigation.navigate('CarCancelStockPage', {
                carId: this.state.carId, completion: () => {
                    this.getCarDetails()
                }
            })
        }
    }

    showDeleteCarAlert() {
        this.setState({
            showAlertData: {
                title: '确认删除该车辆吗',
                cancelBtnText: '取消',
                sureBtnText: '确定',
                type: 'deleteCar'
            },
            showAlertCommonView: true
        })
    }

    deleteCar() {
        let param = {
            carId: this.state.carId,
            operator: Constant.userInfo.userId,
            merchantId: Constant.userInfo.merchantId,
        }
        this.Loading.show('正在删除车辆...')
        HttpUtils.postRequest(HttpUrls.deleteCar, param)
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    ToastToUser('删除车辆成功')
                    if (this.props.route.params.carDetailCallBack) {
                        this.props.route.params.carDetailCallBack()
                    }
                    navigation.goBack()
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
            });
    }

    upCar() {
        let param = {
            carId: this.state.carId,
            operator: Constant.userInfo.fullname,
            merchantId: Constant.userInfo.merchantId,
        }
        if (Constant.userInfo.isFranchisee) {
            param['joinQuotationCenter'] = 1
        } else {
            param['joinUnion'] = 1
        }

        this.Loading.show('正在刷新上架...')
        HttpUtils.postRequest(HttpUrls.refreshUpperTime, param)
            .then((result) => {
                this.Loading.hide()
                if (result.code == 0) {
                    ToastToUser('刷新成功')
                    navigation.goBack()
                    if (this.props.route.params.carDetailCallBack) {
                        this.props.route.params.carDetailCallBack()
                    }
                } else {
                    ToastToUser(result.msg ? result.msg : result.statusText)
                }
            })
            .catch((error) => {
                this.Loading.hide()
            });

    }

    bookCar(isEdit) {
        navigation.navigate('CarBookPage', {
            carId: this.state.carId, isEdit: isEdit, completion: () => {
                navigation.goBack()
                this.getCarDetails()
            }
        })
    }

    carDetection() {
        if (!this.state.data.vcode) {
            ToastToUser('请先填写车辆VIN码')
            return
        }
        if (this.state.data.detectionStatus == carDetectionStatus.carDetectionStatusWaitForDetection) {
            ToastToUser('检测订单已提交，请去检测中心处理')
            return
        }
        if (this.state.data.detectionStatus == carDetectionStatus.carDetectionStatusDetected) {
            ToastToUser('车辆已检测，请勿重复提交')
            return
        }
        navigation.navigate('CarDetectionPage', {
            carId: this.state.carId, completion: () => {
                this.getCarDetails()
            }
        })
    }

    uploadMaintenance() {
        let params = {
            reportPic: this.state.reportPic,
            reportPcUrl: this.state.reportPcUrl,
            reportPdf: this.state.reportPdf,
            carId: this.state.carId ? this.state.carId + '' : '',
            vcode: this.state.data.vcode,
            page: 'CarDetailPage'
        }
        AndroidModule.uploadMaintenanceReport(params, (error, result) => {
            this.getCarDetails()
        })
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    rightBg: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        marginRight: 8,
    },
    rightItemBox: {
        height: '100%',
        width: 40,
        justifyContent: 'center',
        alignItems: 'center'
    },
    rightImg: {
        width: 24,
        height: 24
    },
    sepLine: {
        width: '100%',
        height: 10
    },
    bottomBg: {
        flexDirection: 'row',
        width: '100%',
        backgroundColor: '#fff',
        borderTopColor: '#E4E4E4',
        borderTopWidth: 0.5
    },
    consultBtn: {
        marginTop: 8,
        width: '100%',
        height: 44,
        backgroundColor: '#FFE000',
        borderRadius: 23,
        justifyContent: 'center',
        alignItems: 'center'
    },
    bottomBox: {
        width: '100%',
        height: 49,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    itemBox: {
        flex: 1,
        height: '100%',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'
    },
    itemImg: {
        width: 22,
        height: 22
    },
    itemText: {
        color: '#333333',
        fontSize: 11,
        marginTop: 4,
    }
})